<template>
	<view>
		<navbar :title="title" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__box">
				<view class="" style="padding: 10rpx 0;">
					<u-tabs :list="list4" lineWidth="28rpx" lineHeight='7rpx' lineColor="#3262FD" :activeStyle="{
					            color: '#232323',
					            fontWeight: 'bold',
					            transform: 'scale(1.125)'
					        }" :inactiveStyle="{
					            color: '#707070 ',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 34rpx; padding-right: 34rpx; height: 80rpx;font-size:32rpx;" @click="clicktab">
					</u-tabs>
				</view>
				<scroll-view scroll-y="true" class="scbox">
					<view class="list" v-if="goodslist.length>0">
						<view class="list__item" v-for="(item,index) in goodslist" :key="index" @click="navto('/pages/lease/goods?id='+item.id)">
							<image :src="URL(item.image)" class="list__item__pic" mode="aspectFit"></image>
							<view class="list__item__info">
								<view class="list__item__info__name u-line-1">
									{{item.name}}
								</view>
								<view class="list__item__info__price">
									<text class="list__item__info__unit">¥</text> {{item.price}} <text class="list__item__info__unit">/天起</text> <text class="list__item__info__old">{{item.oldprice}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-empty v-else></u-empty>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import goods from '@/api/_goods.js'
	export default {
		data() {
			return {
				title: '',
				list4: [],
				goodslist:[],
				type:null
			};
		},
		onLoad(o) {
			this.title = o.title
			this.type=o.type
			this.gettypelist()
		},
		methods:{
			async gettypelist(){
				let res = await goods.getType({type:this.type})
				if(res.data.code==1){
					this.list4=res.data.data
					if(this.list4.length>0){
						this.getgoods(this.list4[0].id)
					}
				}
			},
			async getgoods(type_id){
				let res = await goods.goodsindex({type:this.type,type_id})
				if(res.data.code==1){
					this.goodslist=res.data.data
				}
			},
			clicktab(e){
				// console.log(e)
				this.getgoods(e.id)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.con {
		padding: 20rpx 30rpx 0;

		&__box {
			height: calc(100vh - var(--status-bar-height) - 44px - 20rpx);
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
	.scbox{
		height: calc(100% - 80rpx - 20rpx);
	}
	.list{
		padding: 10rpx 26rpx 1rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		&__item{
			margin-bottom: 18rpx;
			&__pic{
				width: 308rpx;
				height: 344rpx;
				background: #fff;
				border-radius: 15rpx 15rpx 0rpx 0rpx;
				border: 1rpx solid #E3EDFF;
				border-bottom: 0;
			}
			&__info{
				width: 308rpx;
				height: 128rpx;
				border-radius: 0rpx 0rpx 15rpx 15rpx;
				border: 1rpx solid #E3EDFF;
				background: #fff;
				margin-top: -4px;
				&__name{
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #181818;
					line-height: 30rpx;
					padding: 25rpx 16rpx 0;
					margin-bottom: 20rpx;
					width: 276rpx;
				}
				&__price{
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 30rpx;
					color: #FD2A00;
					line-height: 25rpx;
					display: flex;
					align-items: center;
					padding-left: 18rpx;
				}
				&__unit{
					font-size: 20rpx;
				}
				&__old{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #919191;
					line-height: 22rpx;
					text-decoration-line: line-through;
					margin-left: 8rpx;
				}
			}
		}
	}
</style>